<template>
  <div>
    <div>Child...</div>
    <p>{{ num }}</p>
    <!-- 方法一 -->
    <!--  <button @click="num++">不允许直接修改props数据</button>
    <div></div>
    <button @click="$emit('setNum')">通过传递方法触发</button> -->

    <!-- 方法2 -->
    <button @click="$emit('update:num', num + 1)">
      给子组件传递一个props数据，给子组件绑定一个自定义事件
    </button>
    <div>
      给子组件传递一个props数据，数据名：xxx 给子组件绑定一个自定义事件,
      事件名：update:xxx 触发事件传递的第一个参数，就会改变xxx的值
    </div>
  </div>
</template>

<script>
export default {
  name: "Child",
  // props数据只读，不能直接修改数据
  props: {
    num: Number,
  },
};
</script>

<style></style>
